<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex-demo-2</title>
  <link rel="stylesheet" href="../../css/reset.css" type="text/css">
  <style>
    body{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content {
      width: 1100px;
      height: 650px;
      background-color: #b3d4fc;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: space-evenly;
      justify-content: space-evenly;


    }

    .inner1{
      width: 250px;
      height: 150px;
      background-color: #888888;
      border: 1px solid black;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-around;


    }

    .inner1-1{
      width: 45px;
      height: 40px;
      background-color: skyblue;
      border: 1px solid black;
      line-height: 40px;
      text-align: center;
    }

    .inner1-2{
      flex-direction: row;
      align-content: space-between;
      justify-content: space-evenly;

    }

    .inner1-2-1{
      width: 45px;
      height: 40px;
      background-color: orange;
      border: 1px solid black;
      line-height: 40px;
      text-align: center;
    }

    .inner1-2-1-9{
      background-image: url("../../img/未完成.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position-x: 11px;
      background-position-y: -5px;
    }

    .inner1-2-1-8{
      background-image: url("../../img/已完成.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position-x: 11px;
      background-position-y: -5px;
    }

  </style>
</head>
<body>
<div class="content">
  <div class="inner1">
    <div class="inner1-1 inner1-2-1-9">1</div>
    <div class="inner1-1 inner1-2-1-9">2</div>
    <div class="inner1-1 inner1-2-1-8">3</div>
    <div class="inner1-1 inner1-2-1-8">4</div>
    <div class="inner1-1 inner1-2-1-8">5</div>
    <div class="inner1-1 inner1-2-1-8">6</div>
    <div class="inner1-1 inner1-2-1-9">7</div>
    <div class="inner1-1 inner1-2-1-8">8</div>
    <div class="inner1-1 inner1-2-1-9">9</div>
    <div class="inner1-1 inner1-2-1-8">10</div>
  </div>

  <div class="inner1 inner1-2">
    <div class="inner1-2-1 inner1-2-1-9">1</div>
    <div class="inner1-2-1 inner1-2-1-9">2</div>
    <div class="inner1-2-1 inner1-2-1-8">3</div>
    <div class="inner1-2-1 inner1-2-1-9">4</div>
    <div class="inner1-2-1 inner1-2-1-9">5</div>
    <div class="inner1-2-1 inner1-2-1-8">6</div>
    <div class="inner1-2-1 inner1-2-1-8">7</div>
    <div class="inner1-2-1 inner1-2-1-8">8</div>
    <div class="inner1-2-1 inner1-2-1-9">9</div>
  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>

  <div class="inner1">

  </div>
</div>
</body>
</html>
